<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
        <div class="layui-form-item">
      <label class="layui-form-label">用户OpenId</label>
      <div class="layui-input-block">
        <input type="openId" name="openId" placeholder="请输入用户OpenId" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">用户是否订阅该公众号标识，值为0时，代表此用户没有关注该公众号，拉取不到其余信息。</label>
      <div class="layui-input-block">
        <input type="subscribe" name="subscribe" placeholder="请输入用户是否订阅该公众号标识，值为0时，代表此用户没有关注该公众号，拉取不到其余信息。" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">用户的昵称</label>
      <div class="layui-input-block">
        <input type="nickname" name="nickname" placeholder="请输入用户的昵称" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">用户的性别，值为1时是男性，值为2时是女性，值为0时是未知</label>
      <div class="layui-input-block">
        <input type="sex" name="sex" placeholder="请输入用户的性别，值为1时是男性，值为2时是女性，值为0时是未知" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">用户所在城市</label>
      <div class="layui-input-block">
        <input type="city" name="city" placeholder="请输入用户所在城市" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">用户所在国家</label>
      <div class="layui-input-block">
        <input type="country" name="country" placeholder="请输入用户所在国家" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">用户所在省份</label>
      <div class="layui-input-block">
        <input type="province" name="province" placeholder="请输入用户所在省份" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">语用户的语言，简体中文为zh_CN</label>
      <div class="layui-input-block">
        <input type="language" name="language" placeholder="请输入语用户的语言，简体中文为zh_CN" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。</label>
      <div class="layui-input-block">
        <input type="headImgUrl" name="headImgUrl" placeholder="请输入用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">用户关注时间，为时间戳。如果用户曾多次关注，则取最后关注时间</label>
      <div class="layui-input-block">
        <input type="subscribeTime" name="subscribeTime" placeholder="请输入用户关注时间，为时间戳。如果用户曾多次关注，则取最后关注时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。</label>
      <div class="layui-input-block">
        <input type="unionId" name="unionId" placeholder="请输入只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">公众号运营者对粉丝的备注，公众号运营者可在微信公众平台用户管理界面对粉丝添加备注</label>
      <div class="layui-input-block">
        <input type="remark" name="remark" placeholder="请输入公众号运营者对粉丝的备注，公众号运营者可在微信公众平台用户管理界面对粉丝添加备注" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">用户所在的分组ID（兼容旧的用户分组接口）</label>
      <div class="layui-input-block">
        <input type="groupId" name="groupId" placeholder="请输入用户所在的分组ID（兼容旧的用户分组接口）" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">用户被打上的标签ID列表</label>
      <div class="layui-input-block">
        <input type="tagIdList" name="tagIdList" placeholder="请输入用户被打上的标签ID列表" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">返回用户关注的渠道来源，ADD_SCENE_SEARCH 公众号搜索，ADD_SCENE_ACCOUNT_MIGRATION 公众号迁移，ADD_SCENE_PROFILE_CARD 名片分享，ADD_SCENE_QR_CODE 扫描二维码，ADD_SCENE_PROFILE_LINK 图文页内名称点击，ADD_SCENE_PROFILE_ITEM 图文页右上角菜单，ADD_SCENE_PAID 支付后关注，ADD_SCENE_WECHAT_ADVERTISEMENT 微信广告，ADD_SCENE_OTHERS 其他</label>
      <div class="layui-input-block">
        <input type="subscribeScene" name="subscribeScene" placeholder="请输入返回用户关注的渠道来源，ADD_SCENE_SEARCH 公众号搜索，ADD_SCENE_ACCOUNT_MIGRATION 公众号迁移，ADD_SCENE_PROFILE_CARD 名片分享，ADD_SCENE_QR_CODE 扫描二维码，ADD_SCENE_PROFILE_LINK 图文页内名称点击，ADD_SCENE_PROFILE_ITEM 图文页右上角菜单，ADD_SCENE_PAID 支付后关注，ADD_SCENE_WECHAT_ADVERTISEMENT 微信广告，ADD_SCENE_OTHERS 其他" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">二维码扫码场景（开发者自定义）</label>
      <div class="layui-input-block">
        <input type="qrScene" name="qrScene" placeholder="请输入二维码扫码场景（开发者自定义）" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">二维码扫码场景描述（开发者自定义）</label>
      <div class="layui-input-block">
        <input type="qrSceneStr" name="qrSceneStr" placeholder="请输入二维码扫码场景描述（开发者自定义）" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">创建时间</label>
      <div class="layui-input-block">
        <input type="createTime" name="createTime" placeholder="请输入创建时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">更新时间</label>
      <div class="layui-input-block">
        <input type="updateTime" name="updateTime" placeholder="请输入更新时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">是否删除(1未删除；0已删除)</label>
      <div class="layui-input-block">
        <input type="deleted" name="deleted" placeholder="请输入是否删除(1未删除；0已删除)" autocomplete="off" class="layui-input">
      </div>
    </div>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>

<div class="table_div">
  <div id="searchParam"  shiro:hasPermission="wxUser:list">
    <div class="layui-form-item">
      <div class="layui-input-inline">
        <input type="text" id="key" class="layui-input"  autocomplete="off" placeholder="请输入">
      </div>

      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
        <button class="layui-btn"   id="export">导出全部</button>
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add"  shiro:hasPermission="wxUser:add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="wxUser:delete">删除</button>
  </div>
</script>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="wxUser:update">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="wxUser:delete">删除</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;

  layui.use(['table', 'layer', 'laydate'], function () {

    //加载table
    tableIns1 = table.render({
      elem: '#showTable'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/wxUser/listByPage' //数据接口
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'id', title: '主键', sort: true},
          {field: 'openId', title: '用户OpenId', sort: true},
          {field: 'subscribe', title: '用户是否订阅该公众号标识，值为0时，代表此用户没有关注该公众号，拉取不到其余信息。', sort: true},
          {field: 'nickname', title: '用户的昵称', sort: true},
          {field: 'sex', title: '用户的性别，值为1时是男性，值为2时是女性，值为0时是未知', sort: true},
          {field: 'city', title: '用户所在城市', sort: true},
          {field: 'country', title: '用户所在国家', sort: true},
          {field: 'province', title: '用户所在省份', sort: true},
          {field: 'language', title: '语用户的语言，简体中文为zh_CN', sort: true},
          {field: 'headImgUrl', title: '用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。', sort: true},
          {field: 'subscribeTime', title: '用户关注时间，为时间戳。如果用户曾多次关注，则取最后关注时间', sort: true},
          {field: 'unionId', title: '只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。', sort: true},
          {field: 'remark', title: '公众号运营者对粉丝的备注，公众号运营者可在微信公众平台用户管理界面对粉丝添加备注', sort: true},
          {field: 'groupId', title: '用户所在的分组ID（兼容旧的用户分组接口）', sort: true},
          {field: 'tagIdList', title: '用户被打上的标签ID列表', sort: true},
          {field: 'subscribeScene', title: '返回用户关注的渠道来源，ADD_SCENE_SEARCH 公众号搜索，ADD_SCENE_ACCOUNT_MIGRATION 公众号迁移，ADD_SCENE_PROFILE_CARD 名片分享，ADD_SCENE_QR_CODE 扫描二维码，ADD_SCENE_PROFILE_LINK 图文页内名称点击，ADD_SCENE_PROFILE_ITEM 图文页右上角菜单，ADD_SCENE_PAID 支付后关注，ADD_SCENE_WECHAT_ADVERTISEMENT 微信广告，ADD_SCENE_OTHERS 其他', sort: true},
          {field: 'qrScene', title: '二维码扫码场景（开发者自定义）', sort: true},
          {field: 'qrSceneStr', title: '二维码扫码场景描述（开发者自定义）', sort: true},
          {field: 'createTime', title: '创建时间', sort: true},
          {field: 'updateTime', title: '更新时间', sort: true},
          {field: 'deleted', title: '是否删除(1未删除；0已删除)', sort: true},
          {width: 120, toolbar: "#tool", title: '操作'}
        ]
      ]
      , toolbar: '#toolbar'
    });


    //表头工具
    table.on('toolbar(showTable)', function(obj){
      switch(obj.event){
        case 'batchDeleted':
          var checkStatus = table.checkStatus(obj.config.id);
          var data = checkStatus.data;
          if(data.length==0){
            layer.msg("请选择要批量删除的列");
          }else {
            var ids = [];
            $(data).each(function (index,item) {
              ids.push(item.id);
            });
            tipDialog(ids);
          }
          break;
        case 'add':
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("新增");
          $(".operation input[name=id]").val("");
          $(".operation input[name=openId]").val("");
          $(".operation input[name=subscribe]").val("");
          $(".operation input[name=nickname]").val("");
          $(".operation input[name=sex]").val("");
          $(".operation input[name=city]").val("");
          $(".operation input[name=country]").val("");
          $(".operation input[name=province]").val("");
          $(".operation input[name=language]").val("");
          $(".operation input[name=headImgUrl]").val("");
          $(".operation input[name=subscribeTime]").val("");
          $(".operation input[name=unionId]").val("");
          $(".operation input[name=remark]").val("");
          $(".operation input[name=groupId]").val("");
          $(".operation input[name=tagIdList]").val("");
          $(".operation input[name=subscribeScene]").val("");
          $(".operation input[name=qrScene]").val("");
          $(".operation input[name=qrSceneStr]").val("");
          $(".operation input[name=createTime]").val("");
          $(".operation input[name=updateTime]").val("");
          $(".operation input[name=deleted]").val("");
          break;
      };
    });
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'del':
          var ids=[];
          ids.push(data.id);
          tipDialog(ids);
          break;
        case 'edit':
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("编辑");
          $(".operation input[name=id]").val(data.id);
          $(".operation input[name=openId]").val(data.openId);
          $(".operation input[name=subscribe]").val(data.subscribe);
          $(".operation input[name=nickname]").val(data.nickname);
          $(".operation input[name=sex]").val(data.sex);
          $(".operation input[name=city]").val(data.city);
          $(".operation input[name=country]").val(data.country);
          $(".operation input[name=province]").val(data.province);
          $(".operation input[name=language]").val(data.language);
          $(".operation input[name=headImgUrl]").val(data.headImgUrl);
          $(".operation input[name=subscribeTime]").val(data.subscribeTime);
          $(".operation input[name=unionId]").val(data.unionId);
          $(".operation input[name=remark]").val(data.remark);
          $(".operation input[name=groupId]").val(data.groupId);
          $(".operation input[name=tagIdList]").val(data.tagIdList);
          $(".operation input[name=subscribeScene]").val(data.subscribeScene);
          $(".operation input[name=qrScene]").val(data.qrScene);
          $(".operation input[name=qrSceneStr]").val(data.qrSceneStr);
          $(".operation input[name=createTime]").val(data.createTime);
          $(".operation input[name=updateTime]").val(data.updateTime);
          $(".operation input[name=deleted]").val(data.deleted);
          break;
      }
    });

    //导出
    $('#export').on('click', function () {
      //原先分页limit
      var exportParams = {
        limit: 10000,
        key: $("#key").val()
      };
      CoreUtil.sendPost("/wxUser/listByPage", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });

    //删除
    var tipDialog=function (ids) {
      layer.open({
        content: "确定要删除么?",
        yes: function(index, layero){
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendDelete("/wxUser/delete",ids,function (res) {
            layer.msg(res.msg, {time:1000},function () {
              search();
            });
          });
        }
      });
    };

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/wxUser/add",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }else {
        CoreUtil.sendPut("/wxUser/update",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }

      return false;
    });
  });

  //执行查询
  function search() {
    //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
        key: $("#key").val()
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
</script>